import IconDouyin from '@/components/icon/IconDouyin';
import IconToutiao from '@/components/icon/IconToutiao';
import IconWeChatOfficialAccount from '@/components/icon/IconWeChatOfficialAccount';
import IconWeibo from '@/components/icon/IconWeibo';
import { Area, Tiny } from '@ant-design/plots';
import { ProCard, StatisticCard } from '@ant-design/pro-components';
import { useAccess, useModel } from '@umijs/max';
import { Flex, Spin } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React from 'react';
dayjs.extend(customParseFormat);
const dateFormat = 'YYYY/MM/DD';

interface AnalysisPreviewRecordProps {
  loading: boolean;
  previewData: TophubRecordData.AnalysisPreview | undefined;
  onRefurbish: () => void;
}

const AnalysisPreviewRecord: React.FC<AnalysisPreviewRecordProps> = ({
  loading,
  previewData,
  onRefurbish,
}) => {
  const access = useAccess();

  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const TinyRingChartsView = (color: string, percent: number) => {
    const i = (percent * 100).toFixed(1);

    const config = {
      percent: percent,
      width: 60,
      height: 60,
      color: ['#E8EFF5', color],
      innerRadius: 0.7,
      annotations: [
        {
          type: 'text',
          style: {
            text: `${i}%`,
            x: '50%',
            y: '50%',
            textAlign: 'center',
            fontSize: 12,
            fontStyle: 'bold',
          },
        },
      ],
    };

    return <Tiny.Ring {...config} />;
  };

  const AreaChartsView = (dateDatas: { date: string; value: number }[]) => {
    const config = {
      data: dateDatas,
      width: 300,
      height: 100,
      padding: 10,
      shapeField: 'smooth',
      xField: 'date',
      yField: 'value',
      style: {
        fill: 'linear-gradient(-90deg, white 0%, #108ee9 100%)',
        fillOpacity: 0.6,
      },
    };

    return <Area {...config} />;
  };

  const TinyAreaChartsView = (dateDatas: { date: string; value: number }[]) => {
    const config = {
      data: dateDatas,
      width: 380,
      height: 80,
      padding: 8,
      shapeField: 'smooth',
      xField: 'date',
      yField: 'value',
      style: {
        fill: 'linear-gradient(-90deg, white 0%, #108ee9 100%)',
        fillOpacity: 0.6,
      },
    };
    return <Tiny.Area {...config} />;
  };

  const descriptionView = (title: string, value?: number, unit?: string) => {
    return (
      <div>
        <span
          style={{
            fontSize: 12,
            marginRight: 6,
          }}
        >
          {title}
        </span>
        <span
          style={{
            fontSize: 12,
            color: 'rgba(0, 0, 0, 0.65)',
          }}
        >
          {value}
          {unit}
        </span>
      </div>
    );
  };

  return (
    <>
      {loading ? (
        <Flex
          justify={'center'}
          align={'center'}
          style={{
            width: '100%',
          }}
        >
          <Spin spinning={loading} />
        </Flex>
      ) : (
        previewData && (
          <ProCard split="horizontal">
            <ProCard split="vertical">
              <StatisticCard
                statistic={{
                  title: '上榜作品 / 上榜账号 / 检测账号',
                  value: `${previewData?.totalDeduplicationHot} 条 / ${previewData?.totalRecordSource} 个 / ${previewData?.totalSource} 个`,
                  style: {
                    width: '100%',
                  },
                }}
                chart={TinyAreaChartsView(previewData?.dateDatas)}
              />
              <StatisticCard
                statistic={{
                  title: '全国 / 重庆',
                  value: `${previewData?.countHotCity0} / ${previewData?.countHotCity1}`,
                  suffix: (
                    <span
                      style={{
                        fontSize: 12,
                        color: 'rgba(0, 0, 0, 0.65)',
                      }}
                    >
                      条
                    </span>
                  ),
                  style: {
                    width: '100%',
                  },
                  description: (
                    <>
                      <div>
                        <span
                          style={{
                            fontSize: 12,
                            marginRight: 6,
                          }}
                        >
                          微博
                        </span>
                        <span
                          style={{
                            fontSize: 12,
                            color: 'rgba(0, 0, 0, 0.65)',
                          }}
                        >
                          全国/{previewData?.countWeiBoHotCity0}
                        </span>
                        <span
                          style={{
                            fontSize: 12,
                            color: 'rgba(0, 0, 0, 0.65)',
                            marginLeft: 3,
                          }}
                        >
                          重庆/{previewData?.countWeiBoHotCity1}
                        </span>
                      </div>
                      <div>
                        <span
                          style={{
                            fontSize: 12,
                            marginRight: 6,
                          }}
                        >
                          抖音
                        </span>
                        <span
                          style={{
                            fontSize: 12,
                            color: 'rgba(0, 0, 0, 0.65)',
                          }}
                        >
                          全国/{previewData?.countDouYinHotCity0}
                        </span>
                        <span
                          style={{
                            fontSize: 12,
                            color: 'rgba(0, 0, 0, 0.65)',
                            marginLeft: 3,
                          }}
                        >
                          重庆/{previewData?.countDouYinHotCity1}
                        </span>
                      </div>
                      <div>
                        <span
                          style={{
                            fontSize: 12,
                            marginRight: 6,
                          }}
                        >
                          头条
                        </span>
                        <span
                          style={{
                            fontSize: 12,
                            color: 'rgba(0, 0, 0, 0.65)',
                          }}
                        >
                          全国/{previewData?.countJinRiTouTiaoHotCity0}
                        </span>
                        <span
                          style={{
                            fontSize: 12,
                            color: 'rgba(0, 0, 0, 0.65)',
                            marginLeft: 3,
                          }}
                        >
                          重庆/{previewData?.countJinRiTouTiaoHotCity1}
                        </span>
                      </div>
                    </>
                  ),
                }}
                chart={TinyRingChartsView(
                  '#ffd32a',
                  //0.000001 解决 等于0 的时候 饼状图消失
                  previewData?.total == 0
                    ? 0.000001
                    : previewData?.countHotCity0 / previewData?.total,
                )}
                chartPlacement="left"
              />
              <StatisticCard
                statistic={{
                  title: '市属媒体 / 区县媒体',
                  value: `${previewData?.countLevel2000} / ${previewData?.countLevel3000}`,
                  suffix: (
                    <span
                      style={{
                        fontSize: 12,
                        color: 'rgba(0, 0, 0, 0.65)',
                      }}
                    >
                      条
                    </span>
                  ),
                  style: {
                    width: '100%',
                  },
                  description: (
                    <>
                      {descriptionView('市属账号', previewData?.countSourceLevel2000, '个')}
                      {descriptionView('区县账号', previewData?.countSourceLevel3000, '个')}
                    </>
                  ),
                }}
                chart={TinyRingChartsView(
                  '#108ee9',
                  //0.000001 解决 等于0 的时候 饼状图消失
                  previewData?.total == 0
                    ? 0.000001
                    : previewData?.countLevel2000 / previewData?.total,
                )}
                chartPlacement="left"
              />
              {/* <StatisticCard.Group
                style={{
                  width: '100%',
                }}
                direction={'row'}
              >
                <StatisticCard.Divider type={'vertical'} />
              </StatisticCard.Group> */}
            </ProCard>
            <ProCard split="vertical">
              <StatisticCard
                statistic={{
                  title: (
                    <Flex justify={'flex-start'} align={'center'}>
                      <IconWeibo width={18} height={18} />
                      <span
                        style={{
                          marginLeft: 10,
                        }}
                      >
                        微博
                      </span>
                    </Flex>
                  ),
                  value: previewData?.totalWeiBo,
                  suffix: (
                    <span
                      style={{
                        fontSize: 12,
                        color: 'rgba(0, 0, 0, 0.65)',
                      }}
                    >
                      条
                    </span>
                  ),
                  style: {
                    width: '100%',
                  },
                  description: (
                    <>
                      {descriptionView('市属媒体', previewData?.countWeiBoLevel2000, '条')}
                      {descriptionView('区县媒体', previewData?.countWeiBoLevel3000, '条')}
                      {descriptionView('全国范围', previewData?.countWeiBoHotCity0, '条')}
                      {descriptionView('重庆地区', previewData?.countWeiBoHotCity1, '条')}
                    </>
                  ),
                }}
                chart={TinyRingChartsView(
                  '#FF2F34',
                  //0.000001 解决 等于0 的时候 饼状图消失
                  previewData?.total == 0 ? 0.000001 : previewData?.totalWeiBo / previewData?.total,
                )}
                chartPlacement="left"
              />
              <StatisticCard
                statistic={{
                  title: (
                    <Flex justify={'flex-start'} align={'center'}>
                      <IconDouyin width={18} height={18} />
                      <span
                        style={{
                          marginLeft: 10,
                        }}
                      >
                        抖音
                      </span>
                    </Flex>
                  ),
                  value: previewData?.totalDouYin,
                  suffix: (
                    <span
                      style={{
                        fontSize: 12,
                        color: 'rgba(0, 0, 0, 0.65)',
                      }}
                    >
                      条
                    </span>
                  ),
                  style: {
                    width: '100%',
                  },
                  description: (
                    <>
                      {descriptionView('市属媒体', previewData?.countDouYinLevel2000, '条')}
                      {descriptionView('区县媒体', previewData?.countDouYinLevel3000, '条')}
                      {descriptionView('全国范围', previewData?.countDouYinHotCity0, '条')}
                      {descriptionView('重庆地区', previewData?.countDouYinHotCity1, '条')}
                    </>
                  ),
                }}
                chart={TinyRingChartsView(
                  '#170B1A',
                  //0.000001 解决 等于0 的时候 饼状图消失
                  previewData?.total == 0
                    ? 0.000001
                    : previewData?.totalDouYin / previewData?.total,
                )}
                chartPlacement="left"
              />
              <StatisticCard
                statistic={{
                  title: (
                    <Flex justify={'flex-start'} align={'center'}>
                      <IconToutiao width={18} height={18} />
                      <span
                        style={{
                          marginLeft: 10,
                        }}
                      >
                        今日头条
                      </span>
                    </Flex>
                  ),
                  value: previewData?.totalJinRiTouTiao,
                  suffix: (
                    <span
                      style={{
                        fontSize: 12,
                        color: 'rgba(0, 0, 0, 0.65)',
                      }}
                    >
                      条
                    </span>
                  ),
                  style: {
                    width: '100%',
                  },
                  description: (
                    <>
                      {descriptionView('市属媒体', previewData?.countJinRiTouTiaoLevel2000, '条')}
                      {descriptionView('区县媒体', previewData?.countJinRiTouTiaoLevel3000, '条')}
                      {descriptionView('全国范围', previewData?.countJinRiTouTiaoHotCity0, '条')}
                      {descriptionView('重庆地区', previewData?.countJinRiTouTiaoHotCity1, '条')}
                    </>
                  ),
                }}
                chart={TinyRingChartsView(
                  '#FF2F34',
                  //0.000001 解决 等于0 的时候 饼状图消失
                  previewData?.total == 0
                    ? 0.000001
                    : previewData?.totalJinRiTouTiao / previewData?.total,
                )}
                chartPlacement="left"
              />
              <StatisticCard
                statistic={{
                  title: (
                    <Flex justify={'flex-start'} align={'center'}>
                      <IconWeChatOfficialAccount width={18} height={18} />
                      <span
                        style={{
                          marginLeft: 10,
                        }}
                      >
                        微信 符合 /收录
                      </span>
                    </Flex>
                  ),
                  value: `${previewData?.totalConformWeiXin} / ${previewData?.totalWeiXin}`,
                  suffix: (
                    <span
                      style={{
                        fontSize: 12,
                        color: 'rgba(0, 0, 0, 0.65)',
                      }}
                    >
                      条
                    </span>
                  ),
                  style: {
                    width: '100%',
                  },
                  description: (
                    <>
                      {descriptionView('市属媒体', previewData?.countWeiXinLevel2000, '条')}
                      {descriptionView('区县媒体', previewData?.countWeiXinLevel3000, '条')}
                      {descriptionView('市属账号', previewData?.countWeiXinSourceLevel2000, '个')}
                      {descriptionView('区县账号', previewData?.countWeiXinSourceLevel3000, '个')}
                    </>
                  ),
                }}
                // chart={TinyRingChartsView(
                //   '#87d068',
                //   //0.000001 解决 等于0 的时候 饼状图消失
                //   previewData?.total == 0
                //     ? 0.000001
                //     : previewData?.totalJinRiTouTiao / previewData?.totalWeiXin,
                // )}
                chartPlacement="left"
              />
            </ProCard>
          </ProCard>
        )
      )}
    </>
  );
};
export default AnalysisPreviewRecord;
